<template>
	<view class="box-main">
		<view class="form">
			<view class="label"><text class="i">*</text> 预约事项</view>
			<view class="app-list">
				<view class="btn active">卸货预约</view>
			</view>
			<view class="safe"></view>
			<!-- 	<view class="label"><text class="i">*</text> 预约月台</view>
			<view class="app-list">
				<view class="btn1 " v-for="item in docks" @click="docksClick(item)">{{item.locationDesc}}</view>
			</view> -->
			<view class="safe"></view>
			<view class="label"><text class="i">*</text> 预约时间</view>
			<view class="app-list right-label">
				<view class="btn2 " :class="{active:active===item.value}" v-for="item in timeosolts"
					@click="timesoltClick(item)">{{item.dictLabel}}
				</view>
			</view>
			<view class="safe"></view>
			<view class="label"><text class="i">*</text> 预约描述</view>
			<u--textarea v-model="submitForm.remark" placeholder="请输入内容"></u--textarea>

			<view class="safe"></view>
			<u-button type="warning" text="提交" block :hairline="true" shape="circle" @click="submitApply"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getReservationTime
	} from '@/api/mobile/reservation.js'
	import {
		apply
	} from "../../api/mobile/reservation";
	export default {
		data() {
			return {
				title: 'Hello',
				active: 0,
				value1: "",
				docks: [],
				timeosolts: [],
				alldata: {},
				dock1: {},
				timesolt1: {},
				driverId: null,
				driverInfo: null,
				submitForm: {},
				type: 1
			}
		},
		onLoad() {
			// 同步获取缓存中的数据
			try {
				this.driverId = uni.getStorageSync('carId')
				this.driverInfo = uni.getStorageSync('carInfo')
			} catch (e) {
				// 错误处理
				console.error('获取缓存失败', e)
			}
			this.getDockTime()
		},
		computed: {

		},
		methods: {
			toRouter(utem) {
				uni.navigateTo({
					url: utem
				})
			},
			async getDockTime() {
				const res = await getReservationTime('1')
				console.log("接口响应：", res.data);
				this.alldata = res.data
				this.docks = res.data.docks
				this.timeosolts = res.data.group.policies[0].configDTO.timeSlots
				console.log("driverId：", this.driverId);
				console.log("driverId：", this.driverInfo);
			},
			docksClick(item) {

				this.dock1 = item
				console.log("docksClick：", item);
			},
			timesoltClick(item) {
				this.active = item.value
				this.timesolt1 = item
				console.log("timesoltClick：", item);
			},
			async submitApply() {
				await this.buildForm();
				// this.toRouter('/appoint/success/success')
			},
			async buildForm() {
				this.submitForm.dockId = this.dock1.id
				// this.submitForm.orderType = this.type
				this.submitForm.groupId = this.alldata.group.groupId
				this.submitForm.driverId = this.driverId
				this.submitForm.vehicleNo = this.driverInfo.plateNumber
				this.submitForm.timeSlot = this.timesolt1.value
				this.submitForm.type = this.type
				console.log("this.submitForm：", this.submitForm);
				setTimeout(() => {
					apply(this.submitForm).then(res => {
						if (res.code == 200) {
							this.toRouter('/appoint/success/success')
						}
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-main {
		width: 100%;
		min-height: 100vh;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: #f8f8f8;

		.form {
			width: 100%;
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

			.safe {
				width: 100%;
				height: 40rpx;
			}

			.label {
				width: 100%;
				font-size: 28rpx;
				color: #000;

				.i {
					color: #ff0000;
				}
			}

			.app-list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.btn {
					width: 160rpx;
					height: 60rpx;
					border: 1px solid #eee;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					margin: 0 20rpx;
					margin-bottom: 10rpx;

					&.active {
						background: #f7b651;
						color: #fff;
					}
				}

				.btn1 {
					width: 180rpx;
					height: 60rpx;
					border: 1px solid #eee;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin: 0 10rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					margin-bottom: 10rpx;

					&.active {
						background: #f7b651;
						color: #fff;
					}
				}
			}

			.right-label {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;

				.btn2 {
					width: 100%;
					height: 60rpx;
					border: 1px solid #eee;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin: 0 20rpx;
					margin-bottom: 10rpx;

					&.active {
						background: #f7b651;
						color: #fff;
					}

					&.disable {
						background: #f5f5f5;
						color: #ccc;
						border-color: #ddd;
						pointer-events: none; // 禁止点击
					}
				}
			}
		}
	}
</style>